<template>
         <div>
             <header>卡帮帮</header>
             <h1 style="width:100%;height:1.76rem;"></h1>
             <banner :list="bannerList" />
             <div class="ttkd">
                    <div class="left" :style="note">头条速递</div>
                    <div class="right">
                           <div id="container">
						    <div id="list-wrapper">
						        <ul class="notice-list" id="notice-list">
						            <li v-for="(index,k) in ttdata" :key="k" >尾号{{index.phone}},成功借款{{index.money}}元</li>						            
						        </ul>
						        <ul class="notice-list" id="notice-list-2">
						        </ul>
						    </div>
						</div>
                    </div>
             </div>
             <div class="main">
                    <p class="title" :style="hg">精选优质商户</p>
                    <div class="box" v-for="(item,i) in mainlist" :key="i">
                            <div class="shmc" :style="sj" >
                                  <img :src="sd" />
                                  <p class="text">{{item.title}}</p>
                                  <router-link tag="span" :to="{name:'tenant',params:{'id':item.id}}" class="gd"
                                  >产品详情</router-link>
                            </div>
                            <div class="xq">
                                  <div class="xqtop">
                                        <p class="je">¥ {{item.moneyf}}~{{item.moneyt}}</p>
                                        <p class="zq">{{item.cycle}}周</p>
                                        <p class="yq">已抢{{item.status}}%</p>
                                  </div>
                                  <div class="xqbottom">
                                       <p class="jkje">借款金额（元）</p>
                                       <p class="jkzq">借款周期</p>
                                       <router-link class="sqjk" tag="p" :to="{name:'merchantdetails',params:{'cpid':item.id}}">申请借款</router-link>
                                  </div>
                            </div>
                    </div>
             </div>
             <h2 style="width:100%;height:2.1rem;"></h2>
             <bottom />
         </div>
</template>

<script>
import banner from '@/components/banner'
import bannerimg from "@/assets/img/banner.jpg"
import bannerimg2 from "@/assets/img/task_05.png"
import bannerimg3 from "@/assets/img/rate_01.png"
import bannerimg4 from "@/assets/img/banner-bg.png"
import bottom from "@/components/footer"
import sd from '@/assets/img/sd_03.jpg'
import $ from 'jquery'
// import axios from 'axios'

export default {
    data(){
     return {
         sd:sd,
         ttdata:[],
         mainlist:[],
         bannerList:[],
         note:{
                    backgroundImage: "url(" + require("../assets/img/fj_03.jpg") + ") ",
                    backgroundRepeat: "no-repeat",
                    backgroundSize:"0.64rem 0.64rem",
                    backgroundPosition:"left 0.75rem top 0.78rem",
                },
          hg:{
                    backgroundImage: "url(" + require("../assets/img/hg_03.jpg") + ") ",
                    backgroundRepeat: "no-repeat",
                    backgroundSize:"0.72rem 0.72rem",
                    backgroundPosition:"left 30% top 0.95rem",
                },
          sj:{
                    backgroundImage: "url(" + require("../assets/img/box_06.jpg") + ") ",
                    backgroundRepeat: "no-repeat",
                    backgroundSize:"0.31rem 0.5rem",
                    backgroundPosition:"left 11.2rem top 0.74rem",
               },                                    
             }
  },
  components:{
      banner,
      bottom,
  },
  mounted(){
        var ROLL_SPEED = 100
	    var noticeList1 = $('#notice-list');
	    var noticeList2 = $('#notice-list-2');
	    var listWrapper = $('#list-wrapper');
	    noticeList2.html(noticeList1.html())
	    listWrapper.css('top', 0)
	    var timer = setInterval(rollStart,ROLL_SPEED);
	
	    function rollStart() {
	        if (Math.abs(_subStr(listWrapper.css('top'))) >= noticeList1.height()) {
	            listWrapper.css('top', 0)
	        } else {
	            var top = listWrapper.css('top');
	            listWrapper.css('top', _subStr(top) - 1)
	        }
	    }		    
	    function _subStr(str) {
	        var index = str.indexOf('px');
	        if (index > -1) {
	            return parseFloat(str.substr(0, index + 1))
	        }
        };
          this.$http.get("/api/index/ads")
            .then(res=>{
                this.bannerList = res.data.data
            });
          this.$http.get('/api/index/product')
              .then(res=>{
                  if(res.data.code=="200"){
//                    console.log(res)
                      this.mainlist = res.data.data
                  }
              });
          this.$http.get('/api/index/news')
              .then(res=>{
              	if(res.data.code=="200"){
              		this.ttdata = res.data.data
//            		console.log(this.ttdata)
              	}
              })
      },
      methods:{
           
      }
	       
  }
</script>

<style lang="less" scoped>
        /**{ touch-action: none; }*/
        header{
            width:100%;
            height:1.76rem;
            background:#fff;
            color:#1b88fe;
            text-align:center;
            line-height:1.76rem;
            font-size:0.66rem;
            letter-spacing:0.06rem;
            font-weight:600;
            position:fixed;
            top:0;
            z-index:100;
        }
        .ttkd{
           width:100%;
           height:2.2rem;
           background:yellow;
           display:flex;
        }
        .left{
            width:3.88rem;
            height:100%;
            background:#fff;           
            color:#0dafe6;
            font-size:0.48rem;
            line-height:2.2rem;
            padding-left:1.6rem;
        }
        .right{
            height:100%;
            flex:1;
            background:#fff;
            text-align:center;
            line-height:2.2rem;
            position:relative;
        }
        .lb{
             font-size:0.52rem;
             color:#333333;
             position: absolute;
             left:0.5rem;
             font-weight:600;
        }
        .main{
            width:100%;
            background:#f5f5f5;
            padding-left:5%;
        }
        .title{
            width:100%;
            height:2.6rem;
            background:#f5f5f5;
            line-height:2.6rem;
            font-size:0.66rem;
            color:#333333;
            letter-spacing:0.05rem;
            padding-left:37%;
        }
        .box{
            width:95%;
            height:6rem;
            background:#fff;
            border-radius:0.25rem;
            display:flex;
            flex-direction:column;
            margin-bottom:0.44rem;
        }
        .shmc{
            width:100%;
            height:2rem;
            display:flex;
            border-top-left-radius:0.25rem;
            border-top-right-radius:0.25rem;
            border-bottom:0.02rem solid #dfdfdf;
            line-height:2rem;
            padding-left:2.4rem;
            position: relative;
        }
        .text{
            font-size:0.68rem;
            font-weight:600;
            color:#333333;
        }
        .gd{
            margin-left:3.2rem;
            font-size:0.55rem;
            color:#999999;
        }
        img{
            width:0.38rem;
            height:0.74rem;
            position: absolute;
            left:1.3rem;
            top:0.68rem;
        }
        .xq{
            width:100%;
            flex:1;
            display:flex;
            flex-direction:column;
            border-bottom-left-radius:0.25rem;
            border-bottom-right-radius:0.25rem;
        }
        .xqtop{
            display:flex;
            width:100%;
            height:2.26rem;
            background:#fff;
            line-height:2.26rem;
             padding-left:0.4rem;
            padding-right:1rem;
            justify-content: space-between;
        }
        .je{
            font-size:0.72rem;
            color: #ff5b52;
        }
        .zq{
            font-size:0.66rem;
            color:#333333;
            margin-right:1rem;
        }
        .yq{
            font-size:0.5rem;
            color:#ff5b52;
        }
        .xqbottom{
            width:100%;
            flex:1;
            display:flex;
             border-bottom-left-radius:0.25rem;
            border-bottom-right-radius:0.25rem;
            padding-left:0.9rem;
            padding-right:0.5rem;
            justify-content:space-between;
        }
        .jkje{
            font-size:0.5rem;
            color:#666666;
            line-height:1.6rem;
        }
        .jkzq{
            font-size:0.5rem;
            color:#666666;
            line-height:1.6rem;
            margin-left:0.3rem;
        }
        .sqjk{
            width:3.13rem;
            height:1.12rem;
            border:0.05rem solid #0dafe6;
            border-radius:0.18rem;
            line-height:1.1rem;
            text-align:center;
            color: #0dafe6;
        }
         #container{
	        width:100%;
	        margin:100px auto;
	        position:absolute; 
	        top:0;
	        bottom:0;
	        margin:auto 0;
	        height:50%;
	        overflow: hidden;
    }
    #list-wrapper{
        position: relative;
        top: 0;
    }
    ul {
        list-style: none;
        background: #f8f8f8;
        text-align: center; 
    }
    li{
        height:35px;
        line-height:35px;
        color: #fff;
        text-align:left;
        color:#333333;
        background:#fff;
    }
    
</style>

